// 渲染数据
function getCateList() {
    axios({
        method: 'get',
        url: '/my/article/cates',
    }).then(res => {
        let trs_arr = res.data.data.map(iten => {
            return `
            <tr>
                <td>${iten.name}</td>
                <td>${iten.alias}</td>
                <td><button type="button" class="layui-btn layui-btn-xs edit" data-id="${iten.Id}">编辑</button><button type="button" class="layui-btn layui-btn-danger  layui-btn-xs delete" data-id="${iten.Id}">删除</button></td>
            </tr>
            `
        })
        $('tbody').html(trs_arr.join(''))
    })
}
getCateList()

// 添加类别
$('#add').on('click', function() {
    layer.open({
        area: ['500px', '300px'],
        title: '添加文章分类',
        btn: null,
        content: `
        <form class="layui-form" action="" id="submit-add">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="name">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input" id="alias">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        `
    })
})

// 绑定添加事件  
$('body').on('submit', '#submit-add', function(e) {
    e.preventDefault()
    axios({
        method: 'post',
        url: '/my/article/addcates',
        data: `name=${$('#name').val()}&alias=${$('#alias').val()}`
    }).then(res => {
        console.log(res);
        if (res.data.status === 0) {
            layer.close(layer.index)
            layer.msg('添加成功')
            getCateList()
        }
    })
})

// 删除功能
$('tbody').on('click', '.delete', function() {
    let id = $(this).attr('data-id')
    layer.open({
        title: '在线调试',
        content: '配置各种参数，试试效果',
        btn: ['确认', '取消'],
        yes: function(index, layero) {
            deleteCateOne(id)
        },
        btn2: function(index, layero) {
            //按钮【按钮二】的回调
        }
    });
})

// 删除请求
function deleteCateOne(id) {
    axios({
        method: 'get',
        url: `/my/article/deletecate/${id}`
    }).then(res => {
        if (res.data.status === 0) {
            layer.msg('删除成功')
            getCateList()
        } else {
            layer.msg('删除失败')
        }
    })
}

// 编辑功能  
$('tbody').on('click', '.edit', function() {
    let id = $(this).attr('data-id')
    let td_arr = $(this.parentNode.parentNode).children()
    layer.open({
        area: ['500px', '300px'],
        title: '添加文章分类',
        btn: null,
        content: `
        <form class="layui-form" action="" id="submit-edit" data-id="${id}">
            <div class="layui-form-item">
                <label class="layui-form-label">分类名称</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入分类名称" autocomplete="off" class="layui-input" id="name" value="${td_arr[0].innerHTML}">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">分类别名</label>
                <div class="layui-input-block">
                <input type="text" name="title" required  lay-verify="required" placeholder="请输入分类别名" autocomplete="off" class="layui-input" id="alias" value="${td_arr[1].innerHTML}">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
        `
    })
})

// 绑定编辑事件
$('body').on('submit', '#submit-edit', function(e) {
    e.preventDefault()
    let id = $(this).attr('data-id')
    axios({
        method: 'post',
        url: '/my/article/updatecate',
        data: `Id=${id}&name=${$('#name').val()}&alias=${$('#alias').val()}`
    }).then(res => {
        if (res.data.status === 0) {
            layer.close(layer.index)
            layer.msg('修改成功')
                // 3 重新渲染列表
            getCateList()
        } else {
            layer.msg('修改失败')
        }
    })
})